﻿<!DOCTYPE html>
<html lang="zh-cmn-Hans" style="font-size: 16.15px;">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<title>52教育砸金蛋</title>

<script>
	(function (doc, win) {
		var docEl = doc.documentElement,
				resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
				recalc = function () {
					var clientWidth = docEl.clientWidth;
					if (!clientWidth) return;
					docEl.style.fontSize = 5 * (clientWidth / 100) + 'px';
				};

		if (!doc.addEventListener) return;
		win.addEventListener(resizeEvt, recalc, false);
		doc.addEventListener('DOMContentLoaded', recalc, false);
	})(document, window);
</script>

<style>
	.portrait body div.landscape{ display: none !important; }
	.landscape body div.landscape{ display: block !important; }
	.loading{position:fixed;z-index:999;top:0;left:0;display:table;width:100%;height:100%;background:red;color:#cbe8b2;text-align:center}.loading .loader{display:table-cell;vertical-align:middle}.loading .loader span{position:relative;display:inline-block;margin-bottom:.5rem;border-top:.3rem solid hsla(0,0%,100%,.2);border-right:.3rem solid hsla(0,0%,100%,.2);border-bottom:.3rem solid hsla(0,0%,100%,.2);border-left:.3rem solid #fff;-webkit-animation:load 1s infinite linear;animation:load 1s infinite linear}.loading .loader span,.loading .loader span:after{width:2.8rem;height:2.8rem;border-radius:50%}@-webkit-keyframes load{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes load{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}
</style>
<link rel="stylesheet" type="text/css" href="css/style2.css">

</head>
<body onload="init();">
<!--页面加载-->
<div id="loading" class="loading">
    <div class="loader">
        <span></span>
        <p id="loadtext">Loading...</p>
    </div>
</div>


<div class="gamebox">
    <div class="stage">
        <div class="goldenAgg">
                <div class="ball ball1"></div>
                <div class="ball ball2"></div>
                <div class="ball ball3"></div>
                <div class="ball ball4"></div>
                <div class="ball ball5"></div>
                <div class="ball ball6"></div>
        </div>

        <!--中奖-->
        <div class="winBox" style="display: none;">
            <div>
            <img src="" id="jiang">
            <span id="money">100元</span>
            <span>特等奖</span>
            <button class="btn btn-qrcode">关注我们</button>
            <button id="causel" class="btn">关闭当前</button>
        </div>        
        </div>
    </div>
</div>
<!--活动说明-->
<div class="jn-box" style="display: none;">
    <span class="btn-close">×</span>
    <div id="tabs" class="tabs">
        <strong class="current"><span>活动说明</span></strong>
        <strong><span>我的奖品</span></strong>
    </div>
    <div id="tabs-body" class="tabsbox">
        <div>
            <h4>活动时间</h4>
            <p>2018年12月7日—2019年12月31日,每天准时10点</p>
            <h4>活动奖品</h4>
            <p>特 等 奖：200元现金劵 </p>
            <p>一 等 奖：100元现金劵  </p>
            <p>二 等 奖：50元现金劵 </p>
            <p>三 等 奖：30元现金劵 </p>
            <p>参 与 奖：10元现金劵   </p>
            <p>谢谢参与：关注我们有惊喜哦 </p>
            <p>注：本次活动奖品仅适用于52教育平台，有效期至2019年12月31日止，不可折现。</p>

            <h4>主办单位</h4>
            <p>本次活动主办单位为广西卡莱网络科技有限公司。<br/>主办单位在法律允许的范围内拥有活动的最终解释权</p>

            <h4>活动及兑奖</h4>
            <p>每个微信号每日10点有一次抽奖机会<br/>
               所获奖金可积累，截止时间2019年12月31号，用户所得积累奖可在52教育平台使用。
            </p>

        </div>
        <div style="display: none; padding-bottom: 4rem; position: relative;">
            <div class="winMoney">
                <!-- 后台获取数据 循环显示奖品 -->
                <div class="winRecord">
                   <span>200元现金劵</span>
                   <span>中奖时间：2018.12.20</span>
                </div>
            </div>
            <div class="footer-btn">
                <button id="btn-qrcode" class="btn btn-qrcode">关注我们</button>
            </div>
        </div>
    </div>
</div>

<!-- secience -->
<!--没中-->
<div id="sorryBox" class="sorryBox" style="display: none;">
    <div>
        <img src="http://invi.52carlife.com/choujiangthanks.png" style="margin-bottom: 10%;">
        <button class="btn btn-qrcode">关注我们</button>
        <button id="closeWin" class="btn">关闭当前</button>
    </div>
</div>
<!--关注我们二维码-->
<div class="qrcodeBox" style="display: none;">
    <div>
        <img src="http://first.52carlife.com/first2top2.jpg">
        <span class="qr-close">×</span>
    </div>
</div>


<!-- <img src="http://pjau06cez.bkt.clouddn.com/choujiangjinnang.png" class="acePack"> -->
<img src="http://invi.52carlife.com/choujiangjingnang@2x.png" class="acePack">



<!-- <img src="http://invi.52carlife.com/choujiangmusicIocn@2x.png" id="music" class="music"> -->
<!-- 加音乐 -->
<span id="musicControl">
    <a id="mc_play" class="on" onclick="play_music();">
        <audio id="musicfx" loop="loop"  autoplay="autoplay" >
            <source src="http://invi.52carlife.com/musicmusic.mp3" type="audio/mpeg">
        </audio>
    </a>
</span>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/PreloadJS/1.0.1/preloadjs.min.js"></script>
<script src="https://cdn.bootcss.com/SoundJS/1.0.2/soundjs.min.js"></script>
<script src="css/music.js"></script>
<script>

    // var chance = 1;  //设置砸蛋次数

    function init() {
        var assetsPath = "http://invi.52carlife.com/";
        manifest = [
            {id: "img01", src: "choujiangagg@2x.png"},
            {id: "img02", src: "choujiangagg-puo@2x.png"},
            {id: "img04", src: "lefthammer@2xleft.png"},
            {id: "img05", src: "choujiangjingnang@2x.png"},
        ];

        createjs.Sound.alternateExtensions = ["mp3"];//加载ogg
        preload = new createjs.LoadQueue(true, assetsPath);
        preload.installPlugin(createjs.Sound);
        preload.addEventListener("complete", doneLoading);
        preload.addEventListener("progress", updateLoading);
        preload.loadManifest(manifest);

        function updateLoading() {
            $("#loadtext").text("Loading " + (preload.progress * 100 | 0) + "%");
        }

        //loading完毕
        function doneLoading(event) {
            $("#loading").hide();
            // start 播放背景音乐
            //  createjs.Sound.play("soundname", {interrupt: createjs.Sound.INTERRUPT_NONE, loop: -1, volume: 0.4});
             createjs.Sound.registerSound("http://invi.52carlife.com/musicmusic.mp3", "soundname");
             createjs.Sound.play("soundname", {interrupt: createjs.Sound.INTERRUPT_NONE, loop: -1, volume: 0.4});
        }
        var winH = $(window).innerHeight();
        var winW = $(window).innerWidth();
        $("body,.gamebox,.jn-box,.winBox").css({height:winH,width:winW});

        // $("#chance").text(chance);
        // 是否中奖
        var YesorNo = false;

        function aClick() {

            $(".ball").off("click", aClick);
                var _this = $(this);
                _this.parents(".goldenAgg").addClass("paused");
                _this.html('<img src="http://invi.52carlife.com/lefthammer@2xleft.png" class="hammer"><img src="http://invi.52carlife.com/choujiangagg-puo@2x.png" class="agg-puo">');

                setTimeout(function () {
                    _this.css({background:"none"}).find(".agg-puo").show();

                    setTimeout(function () {
                     //是否中奖
                        if (YesorNo == true){
                            $("#sorryBox").show();
                            YesorNo = false;
                        }
                        else {
                            $(".winBox").show().find("#jiang").attr("src","http://invi.52carlife.com/choujiange8399.png");
                            // 更换多少奖金(设置中奖)
                            var moneyYuan = $("#money").text("200"+"元");
                            console.log(moneyYuan)
                            YesorNo = true;
                        }

                    },500);
                },250);
            // }

        }
        // 共同(关闭奖项)
        function closeWin() {
            $(".winBox").hide();
            $("#sorryBox").hide();
            $(".goldenAgg").removeClass("paused");
            $(".ball").on("click", aClick).html("").attr("style","");
        }
        // 关闭奖项
        $("#causel").on('click',function(){
            closeWin()
        })
        // 同时跳转到我的奖品
        function myWin() {
             // 隐藏中奖图片
           closeWin()

            $(".jn-box").show().find(".btn-close").on('click',function () {
                $(".jn-box").hide();
            });
            console.log($("#tabs").height());
            $("#tabs-body").css({height:winH - $("#tabs").height()});

            //弹出中奖记录           
            var divs = $("#tabs-body > div");
            $("#tabs > strong:eq(0)").removeClass("current").siblings().addClass("current");
            divs.hide();
            divs.eq(1).show();
        }
        // 点击谢谢参与跳转到我的奖品
        $("#sorryBox > div > img").on('click',function() {
            myWin()
        })
        // 点击图片领取奖励
        $("#jiang").on('click',function(){
            myWin()
        })



        $(".ball").on("click", aClick);

        //关闭当前
        $("#closeWin").on('click', function () {
                    $("#sorryBox").hide();
                    $(".goldenAgg").removeClass("paused");
                    $(".ball").on("click", aClick).html("").attr("style","");
        });

        //打开锦囊
        $(".acePack").on('click', function(){
            $(".jn-box").show().find(".btn-close").on('click',function () {
                $(".jn-box").hide();
            });
            console.log($("#tabs").height());
            $("#tabs-body").css({height:winH - $("#tabs").height()});
        });

        //积累金
        $("#tabs > strong").on('click', function(){
            var index = $(this).index();
            var divs = $("#tabs-body > div");
            $(this).addClass("current").siblings().removeClass("current");
            divs.hide();
            divs.eq(index).show();
        });


        //关注二维码
        $(".btn-qrcode").on('click', function(){
            $(".qrcodeBox").show().find(".qr-close").on('click',function () {
                $(".qrcodeBox").hide();
            });
        });

    }
    (function () {
        var init = function () {
            var updateOrientation = function () {
                var orientation = window.orientation;
                switch (orientation) {
                    case 90:
                    case -90:
                        orientation = 'landscape'; //这里是横屏
                        break;
                    default:
                        orientation = 'portrait'; //这里是竖屏
                        break;
                }
                document.body.parentNode.setAttribute('class', orientation);
            };
            window.addEventListener('orientationchange', updateOrientation, false);
            updateOrientation();
        };
        window.addEventListener('DOMContentLoaded', init, false);
    })();

</script>

</body>
</html>